<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站的雏形</title>
    <style>
        .header{
            width: 1350px;
            height: 140px;
            border:1px solid black;
            background: lightgrey;
        }
        .nav-left{
            width: 244px;
            height: 100px;
            border: 1px solid black;
            margin-left: 1px;
            margin-top:1px;
            float: left;

        }
        .nav-middle{
            width: 850px;
            height: 100px;
            border: 1px solid black;
            margin-left: 1px;
            margin-top:1px;
            float: left;
        }
        .nav-right {
            width: 244px;
            height: 100px;
            border: 1px solid black;
            margin-left: 1px;
            margin-top: 1px;

            float: left;
        }
        .nav-menu{
           width: 1350px;
            height:32px;
            border: 1px solid black;
            clear: both;
            float: left;
        }
        #body{
            width: 1350px;
            height: 466px;
            border: 1px solid black;

        }
        .body-one{
            width: 540px;
            height: 200px;
            border: 1px solid  black;
            float: left;
            margin-right:2px;
        }
        .body-two{
            width: 540px;
            height: 200px;
            border: 1px solid  black;
            float: left;
            margin: 0 auto;
        }
        .body-seven{
            width: 258px;
            height:150px;
            border: 1px solid  black;
            float: right;
            margin:1px;
        }

        .body-three{
            width: 268px;
            height:258px;
            border: 1px solid  black;
            clear: both;
            float: left;
            margin:1px;
        }

        .body-four{
            width: 268px;
            height:258px;
            border: 1px solid  black;
            float: left;
            margin:1px;
        }
        .body-five{
            width: 268px;
            height:258px;
            border: 1px solid  black;
            float: left;
            margin:1px;
        }

        .body-six{
            width: 268px;
            height:258px;
            border: 1px solid  black;
            float: left;
            margin:1px;
        }
        .body-eight{
            width: 258px;
            height:150px;
            border: 1px solid  black;
            float: right;
            margin:1px;
            margin-top: -45px;
        }

        .body-nine{
            width: 258px;
            height:150px;
            border: 1px solid  black;
            float: right;
            margin:1px;
        }
        footer{
            width: 1350px;
            height:140px;
            border: 1px solid black;
        }
        .footer1{
            height: 100px;
            border: 1px solid black;
        }

    </style>
</head>
<body>

    <div class="header">
        <div class="nav-left" >首页左边</div>
        <div class="nav-middle">首页中间</div>
        <div class="nav-right">首页右边</div>
        <div class="nav-menu">菜单栏</div>
    </div>
    <div id="body">
        <div class="body-one">栏目一</div>
        <div class="body-two">栏目二</div>
        <div class="body-seven">栏目七</div>
        <div class="body-three">栏目三</div>
        <div class="body-four">栏目四</div>
        <div class="body-five">栏目五</div>
        <div class="body-six">栏目六</div>
        <div class="body-eight">栏目八</div>
        <div class="body-nine">栏目九</div>
    </div>
    <div class="footer">
        <div class="footer1">底部</div>
    </div>

</body>
</html>